<template>
    <div class="login">
        <div class="header">
            <h1 class="header-txt">用户登陆</h1>
            <el-form :model="data.form">
                <el-form-item>
                    <el-input v-model="data.form.username" placeholder="输入用户名" :prefix-icon="User" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="data.form.password" type="password" class="w-50 m-2" placeholder="输入密码"
                        :prefix-icon="Lock" show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script setup>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import md5 from "md5";
const router = useRouter();
const store = useStore();
const data = reactive({
    form: {
        username: "super-admin",
        password: "123456",
    },
});

const onSubmit = () => {
    store
        .dispatch("login", {
            username: data.form.username,
            password: md5(data.form.password),
        })
        .then((res) => {
            router.push("/profile");
        });
};
</script>
  
<style scoped lang='scss'>
.login {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #2d3a4b;
}

.header {
    padding-top: 100px;
    width: 500px;
    height: 100%;
    margin: auto;

    .header-txt {
        text-align: center;
        color: white;
    }
}
</style>